<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/flexible.js"></script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2986739_m1ci5w2fid.css">
    <link rel="stylesheet" href="../css/zhuce.css">
<<<<<<< HEAD
    <link rel="icon" href="../images/favicon.ico" type="images/x-icon">
=======
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164
</head>

<body>
    <div class="allhead">
        <div class="head">
            <div class="head1">
                <span>你好，欢迎来到海澜之家！</span>
                <div class="head1son">
                    <a href="../html/login.html"><b>请登录</b></a>
                    <a href=""><b>合作账号登录</b>
                        <i class="iconfont icon-weibo"></i>
                        <i class="iconfont icon-social-qq"></i>
                    </a>
                    <a href="../html/zhuce.html"><b>免费注册</b></a>
                </div>
                <div class="show" >
                    <span class="show-phone">欢迎:</span>
                    <a href="" class="over">退出</a>
                </div>
            </div>
            <div class="head2">
                <div class="head2son">
                    <a href="" class="">我的海澜之家</a>
                    <a href="" class="">在线客服</a>
                    <a href="../html/cart.html" class="">我的购物袋</a>
                    <a href="" class="">帮助</a>
                </div>
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="nav">
            <div class="wrapson">
                <a href=""><span>附近门店</span></a>
            </div>
            <div class="wrap1son">
                <a href=""><img src="../images/1.png" alt=""></a>
            </div>
            <div class="wrap2son">
                <input type="text" class="sousuo">
                <a href=""><i class="iconfont icon-sousuo"></i></a>
            </div>
        </div>
    </div>
    <div class="banner">
        <ul>
            <a href="">
                <li>首页</li>
            </a>
            <a href="">
                <li>2021夏季热卖</li>
            </a>
            <a href="">
                <li>明星同款</li>
            </a>
            <a href="">
                <li>IP联名</li>
            </a>
            <a href="">
                <li>国民臻品</li>
            </a>
            <a href="">
                <li>2021秋季新品</li>
            </a>
        </ul>
    </div>
    <div class="reg">
        <p>注册新账号</p>
    </div>
    <div class="subject">
        <div class="subson">
            <p>
                <label for="">&emsp;手机号:</label>&emsp;
                <input type="text" id="phone" placeholder="">
                <span id="phoneSpan"></span>
            </p>
            <p>
                <label for="">设定密码:</label>&emsp;
                <input type="text" id="password" placeholder="">
                <span id="pwdSpan"></span>
            </p>
            <p>
                <label for="">确认密码:</label>&emsp;
                <input type="text" id="repwd">
                <span id="repwdSpan"></span>
            </p>
            <p>
                <label for="">&emsp;验证码:</label>&emsp;
                <input type="text" id="code" placeholder="">
                <span id="createCode"></span>
                <span id="codeSpan"></span>
            </p>
        </div>
        <div class="subson1">
            <input type="checkbox" name="" id="Agr">
            <span>我已经阅读并接受《海澜之家服务条款》《隐私条款》</span>
        </div>
        <div class="subson2">
            <button class="regBtn" disabled>确认</button>
            <div><a href="../html/login.html" class="a2">返回登录</a></div>
        </div>
    </div>

    <script src="../js/jquery.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/api.js"></script>
    <script>
        $('.regBtn').click(async function () {
            const phone = $('#phone').val();
            const password = $('#password').val();
            console.log(phone);
            const res = await reg({
                phone,
                password
            })
            const {status,msg} = res;
            if(status){
                alert('注册成功')
                location.href = "../html/login.html";
            }else{
                alert(msg);
            }
      
        })


        var isPwdOk = false;
        var isrePwdOK = false;
        var isPhoneOk = false;
        var isCodeOk = false;
        var isAgrOk = false;

        $('#createCode').html(randCode());
        $('#createCode').click(function () {
            $('#createCode').html(randCode());
        })


        $('#password').blur(function () {
            if (/^\w{6,12}$/.test($('#password').val())) {
                $('#pwdSpan').html("√");
                $('#pwdSpan').css({ 'font-size': '12px', 'color': 'green' })
                isPwdOk = true;

            } else {
                $('#pwdSpan').html("密码由数字，字母大小写，组成（6-12）位之间");
                $('#pwdSpan').css({ 'font-size': '12px', 'color': 'red' })
                isPwdOk = false;
            }
            asd()
        })

        $('#repwd').blur(function () {
            if ($('#password').val() === $('#repwd').val()) {

                $('#repwdSpan').html("√");
                $('#repwdSpan').css({ 'font-size': '12px', 'color': 'green' })
                isrePwdOK = true;

            } else {
                $('#repwdSpan').html("密码不一致");
                $('#repwdSpan').css({ 'font-size': '12px', 'color': 'red' })
                isrePwdOK = false;
            }
            asd()
        })

        $('#phone').blur(function () {

            if (/^1[3-9]\d{9}$/.test($('#phone').val())) {

                $('#phoneSpan').html("√");
                $('#phoneSpan').css({ 'font-size': '12px', 'color': 'green' })
                isPhoneOk = true;

            } else {
                $('#phoneSpan').html("手机号格式不正确");
                $('#phoneSpan').css({ 'font-size': '12px', 'color': 'red' })
                isPhoneOk = false;
            }
            asd()
        })

        $('#code').blur(function () {
            // console.log($('#code').val().toLowerCase());

            if ($('#code').val().toLowerCase() === $('#createCode').html().toLowerCase()) {
                $('#codeSpan').html("√");
                $('#codeSpan').css({ 'font-size': '12px', 'color': 'green' })
                isCodeOk = true;

            } else {
                $('#codeSpan')[0].innerHTML = "验证码错误";
                $('#codeSpan')[0].style.fontSize = "12px";
                $('#codeSpan')[0].style.color = "red";
                isCodeOk = false;
            }
            asd()

        })

        $('#createCode').onclick = function () {
            randCode();
        }

        $('#Agr').click(function () {

            if ($(this).prop('checked')) {
                isAgrOk = true;
            } else {
                isAgrOk = false;
            }
            asd()
        })



        function asd() {
            console.log(isPhoneOk, isPwdOk, isCodeOk, isAgrOk, isrePwdOK);
            if (isPhoneOk && isPwdOk && isCodeOk && isAgrOk && isrePwdOK) {
                $('button').prop('disabled', false)
                $('#regBtn').css({'color':'white'}) 
            }
        }





        // console.log(allArr);

        function randCode(n) {
            n = n || 4;
            var smallArr = [];
            for (var i = 97; i <= 122; i++) {
                var str = String.fromCharCode(i);
                smallArr.push(str)
            }
            var numArr = [];
            for (var i = 0; i < 10; i++) {
                numArr.push(i + '')
            }
            console.log(numArr.length);

            var bigArr = [];
            for (var i = 65; i <= 90; i++) {
                var str = String.fromCharCode(i);
                bigArr.push(str)
            }

            var allArr = smallArr.concat(numArr, bigArr)
            const arr = allArr;
            console.log(arr);
            var res = '';
            for (let i = 0; i < n; i++) {
                let ran = rand(0, arr.length - 1);
                // console.log(ran);
                res += arr[ran]
            }
            return res;
        }


        randCode();

        function rand(min, max) {
            return parseInt(Math.random() * (max - min)) + min;
        }


    </script>
</body>

</html>